
<template>
  <PureTaskList :tasks="tasks" @archive-task="archiveTask" @pin-task="pinTask" />
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useTaskStore } from '@/store/task';
import PureTaskList from '../PureTaskList/index.vue';

//👇 Creates a store instance
const taskStore = useTaskStore();

//👇 Retrieves the tasks from the store's state auxiliary getter function
const tasks = computed(() => taskStore.getFilteredTasks);

//👇 Dispatches the actions back to the store
const archiveTask = (task) => taskStore.archiveTask(task.id);
const pinTask = (task) => taskStore.pinTask(task.id);
</script>
